<template>
  <div>
    <el-form
      ref="form"
      :model="customOption"
      :label-position="lablePosition"
      label-width="125px"
      size="mini"
    >
      <el-form-item label="自定义选项">
        <el-switch
          v-model="customOption.customSwitch"
          @click.native="clickCustomShow"
        ></el-switch>
      </el-form-item>
    </el-form>

    <!--自定义选项 -->
    <el-card v-show="customOptionShow" class="custom">
      <el-form :inline="true" :model="addCustom" size="mini" label-width="20px">
        <!-- 键  -->
        <el-form-item label="键">
          <el-input v-model="addCustom.key" style="width: 12vh"></el-input>
        </el-form-item>
        <!-- 值 -->
        <el-form-item label="值">
          <el-input v-model="addCustom.value" style="width: 12vh"></el-input>
        </el-form-item>
        <!-- 添加按钮 -->
        <el-form-item>
          <el-button
            type="success"
            icon="el-icon-plus"
            circle
            @click="addContent"
          ></el-button>
        </el-form-item>
      </el-form>

      <el-table
        :show-header="false"
        :data="valueData"
        style="width: 100%; margin-top: -15px"
        max-height="160"
      >
        <el-table-column prop="key" width="85"> </el-table-column>

        <el-table-column prop="value" width="85"> </el-table-column>

        <el-table-column width="85">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-delete"
              size="mini"
              @click="delContent(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    customOptionValue: {
      type: Array,
      default: () => [],
    }
  },
  data() {
    return {
      lablePosition: "left",
      customOptionShow: false,
      customOption: {
        customSwitch: false,
      },
      addCustom: {
        key: "",
        value: "",
      },
      valueData: [],
    };
  },
  watch:{
    customOptionValue: {
      handler: function(newData,oldData) {
        if(''!==newData && newData !=undefined){
          let tempdata= JSON.parse(JSON.stringify(newData))//获取到的是数组对象
          this.valueData=tempdata
          if(tempdata.length>0){
            this.customOption.customSwitch=true
            this.customOptionShow=true
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {},
  methods: {
    clickCustomShow() {
      this.customOptionShow = !this.customOptionShow;
    },

    addContent() {
      if (this.addCustom.key == "" || this.addCustom.value == "") {
        return;
      } else {
        this.valueData.unshift(this.addCustom);
      }
      this.addCustom = {
        key: "",
        value: "",
      };
    },

    delContent(index, rows) {
      this.valueData.splice(index, 1);
    },
  },
};
</script>

<style>
</style>
